<script setup lang="ts">
import {routes} from '@/router/routes'
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import {useUserStore} from "@/stores/user";
import {checkAccess} from "@/access/CheckAccess";
import {IconUser, IconCaretDown} from "@arco-design/web-vue/es/icon";

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const loginUser = userStore.loginUser

const visibleRoute = routes.filter((item) => {
  if (item.meta?.hide) return false
  return checkAccess(loginUser, item.meta?.access as string)
})

const selectedKeys = ref(['/'])
router.afterEach((to) => {
  selectedKeys.value = [to.path]
})

const doMenuClick = (key: string) => {
  router.push({ path: key })
}

const getUserRoleName = (role: string) => {
  const roleMap: { [key: string]: string } = {
    admin: '管理员',
    user: '用户',
    guest: '访客'
  }
  return roleMap[role] || '访客'
}
const toLogin = () => {
  router.push({
    path: '/user/login'
  })
}
const logout = () => {
  userStore.logout()
 toLogin()
}
const toRegister = () => {
  router.push({
    path: '/user/register'
  })
}
</script>

<template>
  <a-row class="global-header" align="center" :wrap="false">
    <a-col flex="120px">
      <div class="title-bar" @click="router.push('/')">
        <img class="logo" src="@/assets/logo.svg" alt="logo">
        <span class="title">GetJudgeX平台</span>
      </div>
    </a-col>

    <a-col flex="auto">
      <a-menu
        mode="horizontal"
        :selected-keys="selectedKeys"
        @menu-item-click="doMenuClick"
        class="nav-menu"
      >
        <a-menu-item
          v-for="item in visibleRoute"
          :key="item.path"
          class="menu-item"
        >
          <template #icon v-if="item.meta?.icon">
            <component :is="item.meta.icon" />
          </template>
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </a-col>

    <a-col flex="180px" class="user-info">
      <a-dropdown trigger="hover" position="bottom">
        <div class="user-card">
          <a-avatar class="user-avatar" :size="32">
            <IconUser v-if="!userStore.loginUser.avatar" />
            <img v-else :src="userStore.loginUser.avatar" alt="avatar">
          </a-avatar>
          <div class="user-details">
            <div class="user-name">{{ userStore.loginUser.userName || '未登录' }}</div>
            <div class="user-role">{{ getUserRoleName(userStore.loginUser.userRole) }}</div>
          </div>
          <IconCaretDown class="dropdown-icon" />
        </div>
        <template #content>
          <a-doption v-if="userStore.token" @click="router.push('/user/profile')">个人中心</a-doption>
          <a-doption v-if="userStore.token" @click="logout">退出登录</a-doption>
          <template v-else>
            <a-doption @click="toLogin">去登录</a-doption>
            <a-doption @click="toRegister">去注册</a-doption>
          </template>
        </template>
      </a-dropdown>
    </a-col>
  </a-row>
</template>

<style scoped lang="less">
@keyframes logo-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 64px;
  padding: 0 32px;
  background: linear-gradient(135deg, #1a2333 0%, #0d1219 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(127, 255, 212, 0.1);
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  .title-bar {
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      .logo {
        animation: logo-float 1.5s ease-in-out infinite;
        filter: drop-shadow(0 0 8px rgba(127, 255, 212, 0.6));
      }
      .title {
        text-shadow: 0 0 12px rgba(127, 255, 212, 0.5);
      }
    }

    .logo {
      height: 40px;
      margin-right: 12px;
      filter: drop-shadow(0 0 6px rgba(127, 255, 212, 0.3));
      transition: all 0.3s;
    }

    .title {
      color: #7fffd4;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      font-family: '阿里妈妈数黑体 Bold', sans-serif;
      transition: all 0.3s;
    }
  }

  .nav-menu {
    background: transparent;
    border-bottom: none;
    margin-left: 40px;

    :deep(.arco-menu-overflow) {
      justify-content: center;
      gap: 8px;
    }

    .menu-item {
      color: rgba(255, 255, 255, 0.9);
      font-size: 15px;
      font-weight: 500;
      margin: 0 12px;
      padding: 0 20px;
      border-radius: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        color: #7fffd4 !important;
        background: rgba(127, 255, 212, 0.15) !important;
        transform: translateY(-2px);
      }

      &.arco-menu-selected {
        color: #7fffd4 !important;
        background: rgba(127, 255, 212, 0.1);
        box-shadow: 0 4px 12px rgba(127, 255, 212, 0.15);

        &::after {
          background-color: #7fffd4;
          height: 2px;
          bottom: 8px;
          border-radius: 2px;
          width: 60%;
          left: 20%;
        }
      }
    }
  }

  .user-info {
    .user-card {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s;
      gap: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(127, 255, 212, 0.1);

      &:hover {
        background: rgba(127, 255, 212, 0.1);
        transform: translateY(-1px);

        .user-avatar {
          transform: scale(1.1);
        }
      }

      .user-avatar {
        background: linear-gradient(45deg, #7fffd4, #70e0b0);
        transition: all 0.3s;
      }

      .user-details {
        line-height: 1.2;

        .user-name {
          color: rgba(255, 255, 255, 0.95);
          font-size: 14px;
          font-weight: 500;
          max-width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .user-role {
          color: rgba(127, 255, 212, 0.8);
          font-size: 12px;
          font-weight: 400;
        }
      }

      .dropdown-icon {
        color: rgba(255, 255, 255, 0.6);
        margin-left: 8px;
        transition: transform 0.3s;
      }
    }
  }
}

@media (max-width: 768px) {
  .global-header {
    padding: 0 16px;

    .title-bar {
      .logo {
        height: 32px;
        margin-right: 8px;
      }
      .title {
        font-size: 18px;
      }
    }

    .nav-menu {
      margin-left: 0;

      .menu-item {
        padding: 0 12px;
        margin: 0 4px;
        font-size: 13px;
      }
    }

    .user-info {
      flex: 0 1 140px;

      .user-card {
        padding: 6px 12px;
        gap: 8px;

        .user-details {
          .user-name {
            font-size: 12px;
          }
          .user-role {
            font-size: 10px;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .global-header {
    .title-bar .title {
      display: none;
    }
    .user-info .user-details {
      display: none;
    }
  }
}
</style>
